type MaterialSize = {
    width: number;
    height: number;
    scale: number;
};
/**
 * 计算素材在画布上的缩放尺寸
 * @param designWidth  逻辑画布宽度 (比如 1920)
 * @param designHeight 逻辑画布高度 (比如 960)
 * @param materialWidth 素材原始宽度 (比如 1680)
 * @param materialHeight 素材原始高度 (比如 850)
 * @param realWidth    实际容器宽度 (比如 600)
 * @param realHeight   实际容器高度 (比如 450)
 * @returns 缩放后的宽高和缩放比例
 */
export function calcMaterialSize(
    designWidth: number,
    designHeight: number,
    materialWidth: number,
    materialHeight: number,
    realWidth: number = window.innerWidth * 0.5,
    realHeight: number = window.innerHeight * 0.45
): MaterialSize {
    const scaleX = realWidth / designWidth;
    const scaleY = realHeight / designHeight;
    const scale = Math.min(scaleX, scaleY);
    return {
        width: materialWidth * scale,
        height: materialHeight * scale,
        scale,
    };
}

type ElementPosition = {
    x: number;
    y: number;
    scale: number;
};

/**
 * 计算元素在画布上的位置
 * @param designWidth  逻辑画布宽度 (比如 1920)
 * @param designHeight 逻辑画布高度 (比如 960)
 * @param realWidth    实际容器宽度 (比如 600)
 * @param realHeight   实际容器高度 (比如 450)
 * @param transformX   元素的transform.x值 (比如 0.5 表示画布中心)
 * @param transformY   元素的transform.y值 (比如 -0.3 表示画布上方)
 * @returns 元素的实际位置坐标和缩放比例
 */
export function calcElementPosition(
    designWidth: number,
    designHeight: number,
    realWidth: number = window.innerWidth * 0.5,
    realHeight: number = window.innerHeight * 0.45,
    transformX: number = 0,
    transformY: number = 0
): ElementPosition {
    // 计算缩放比例
    const scaleX = realWidth / designWidth;
    const scaleY = realHeight / designHeight;
    const scale = Math.min(scaleX, scaleY);

    // 计算画布中心偏移
    const canvasCenterX = realWidth / 2;
    const canvasCenterY = realHeight / 2;

    // 计算元素位置
    // transformX 和 transformY 是相对于画布的比例值
    // 例如：transformX = 0.5 表示画布中心，transformX = 1.0 表示画布右边缘
    const elementX = canvasCenterX + transformX * designWidth * scale;
    const elementY = canvasCenterY + transformY * designHeight * scale;

    return {
        x: elementX,
        y: elementY,
        scale,
    };
}

type CanvasCenter = {
    x: number;
    y: number;
    scale: number;
};

/**
 * 获取画布的中心位置
 * @param designWidth  逻辑画布宽度 (比如 1920)
 * @param designHeight 逻辑画布高度 (比如 960)
 * @param realWidth    实际容器宽度 (比如 600)
 * @param realHeight   实际容器高度 (比如 450)
 * @returns 画布中心的坐标和缩放比例
 */
export function getCanvasCenter(realWidth: number = window.innerWidth * 0.5, realHeight: number = window.innerHeight * 0.45): CanvasCenter {
    console.log('实际画布', realWidth, realHeight);
    // 画布中心就是容器的中心
    const centerX = realWidth / 2;
    const centerY = realHeight / 2;

    return {
        x: centerX,
        y: centerY,
        scale: 1,
    };
}
